<template>
  <div id="main">
    <div>
      <van-nav-bar
        title="编辑收货地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-config-provider :theme-vars="themeVars">
      <div>
        <van-address-edit
          :area-list="areaList"
          save-button-text="保存地址"
          delete-button-text="删除地址"
          delete-button-type="danger"
          show-delete
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          :area-placeholder="'请选择省 / 市 / 区'"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
        />
      </div>
    </van-config-provider>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const searchResult = ref([]);

const onSave = () => showToast("save");
const onDelete = () => showToast("delete");
// 配置主题变量,修改其按钮的样式，记得需要先添加<van-config-provider :theme-vars="themeVars">
const themeVars = reactive({
  rateIconFullColor: "#07c160",
  sliderBarHeight: "4px",
  sliderButtonWidth: "20px",
  sliderButtonHeight: "20px",
  sliderActiveBackground: "#07c160",
  buttonPrimaryBackground: "#EE0A24",
  buttonPrimaryBorderColor: "#EE0A24",
});
const onChangeDetail = (val) => {
  if (val) {
    searchResult.value = [
      {
        name: "黄龙万科中心",
        address: "杭州市西湖区",
      },
    ];
  } else {
    searchResult.value = [];
  }
};
const onClickLeft = () => {
  window.history.back();
};
</script>

<style scoped>
#main {
  background-color: #efefef;
  height: 100vh;
}

/* 全局主题变量覆盖 */
:root {
  --van-button-primary-background: #ee0a24; /* 保存按钮红色背景 */
  --van-button-primary-border-color: #ee0a24; /* 红色边框 */
  --van-danger-color: #ee0a24; /* 删除按钮红色 */
}

/* 按钮文本颜色 */
:deep(.van-button--primary) .van-button__text,
:deep(.van-button--danger) .van-button__text {
  color: #fff !important; /* 白色文字 */
}

/* 删除按钮悬停效果 */
:deep(.van-button--danger):hover {
  opacity: 0.9;
}
</style>
